<!DOCTYPE html>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}" />
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>查看文章</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link rel="stylesheet" type="text/css" href="${contextPath}/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="${contextPath}/css/bootstrap-theme.min.css" />
<link rel="stylesheet" type="text/css" href="${contextPath}/css/public.css">
<script type="text/javascript" src="${contextPath}/js/jquery.min.js"></script>
<script type="text/javascript" src="${contextPath}/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${contextPath}/js/common.js"></script>
<style type="text/css">
	.commentLi{
		margin-bottom: 2px;
	}	
	.commentUsername{
		font-weight: 800;
	}
	.commentContentDiv{
		margin-top: 12px; 
		margin-bottom: 10px; 
		overflow: hidden; 
		position: relative;
	}
	.commentContent{
		line-height: 22px;
	}
	.commentOperateDiv{
		color: #9497A0; 
	}
	.commentOperateDiv .commentReply{
		float: right;
		cursor: pointer; 
		padding-right: 20px;
	}
	.commentReply:hover{
		color:#2bbaca;
	}
	.secondCommentListMore{
		margin-left: 20px; 
		font-size: 12px;
		display: none;
		color: #9497A0; 
	}
	.secondCommentListMore:hover{
		color:#2bbaca;
		text-decoration: none;
	}
</style>
</head>
<body>
	<div class="container" style="max-width: 1200px">
		<div class="panel panel-default">
			<div id="titleArea" style="padding-top: 20px; padding-bottom: 20px; text-align: center;">
				<h1 >${article.articleTitle}</h1>
				<p style="font-size: 20px;color: #999;">作者： ${article.createUsername}&nbsp;&nbsp;&nbsp;&nbsp;
				时间：<fmt:formatDate value="${article.createTime}" pattern="yyyy年MM月dd日 ahh点mm分"/>&nbsp;&nbsp;&nbsp;&nbsp;
				<span id="totleCommentNum">评论数 ${totleCommentNum }</span></p>
			</div>
			<div id="contentArea" style="margin-left: 20px;margin-right: 20px;">
				${article.articleContent}
			</div>
			<input id="articleId" type="hidden" value="${article.id }">
			<input id="articleCreateId" type="hidden" value="${article.createId }">
			<input id="articleCreateUsername" type="hidden" value="${article.createUsername }">
		</div>
		<c:if test="${article.isLocked==0 }">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h3 class="panel-title">评论</h3>
				</div>
				<div class="panel-body">
					<div>
						<div>
							<textarea id="toSaveCreateComment" placeholder="有些什么看法，一起讨论吧…" style="width:100%; overflow-x: hidden; word-wrap: break-word; resize: none; height: 120px;"></textarea>
							<button id="createComment" class="btn btn-success pull-right">评论</button>
						</div>
					</div>
				</div>
			</div>
			<div class="panel panel-default" style="background-color: #efefef;">
				<ul class="list-group" id="firstCommentUl">
					<c:forEach items="${commentList }" var="map" varStatus="status">
				    	<li class="list-group-item commentLi">
					    	<div>
					    		<span id="commentUsername_${map.comment.id }" class="commentUsername">${map.comment.createUsername }</span>
					    	</div>
					    	<div class="commentContentDiv">
					    		<p id="commentContent_${map.comment.id }" class="commentContent">${map.comment.content }</p>
					    	</div>
					    	<div class="commentOperateDiv">
					    		<span id="commentTime_${map.comment.id }"><fmt:formatDate value="${map.comment.createTime}" pattern="yyyy年MM月dd日 ahh点mm分ss秒"/></span>
					    		<span class="commentReply" id="commentReply_${map.comment.id }_${map.comment.isCommentReply }">回复</span>
					    	</div>
					    	<c:if test="${map.replyNum>0}">
						    	<div id="comment_tlv_list" style="border-left: 3px #262626 solid;">
						    		<ul class="list-group">
						    			<c:forEach items="${map.replyList }" var="reply" varStatus="status">
							    			<li class="list-group-item">
							    				<div>
										    		<span id="commentUsername_${reply.id }" class="commentUsername">${reply.createUsername }</span>
										    	</div>
										    	<div class="commentContentDiv">
										    		<p id="commentContent_${reply.id }" class="commentContent">回复<span style="color:#2bbaca;">${reply.targetUsername }</span>：${reply.content }</p>
										    	</div>
										    	<div class="commentOperateDiv">
										    		<span id="commentTime_${reply.id }"><fmt:formatDate value="${reply.createTime}" pattern="yyyy年MM月dd日 ahh点mm分ss秒"/></span>
										    		<span class="commentReply" id="commentReply_${reply.id }_${reply.isCommentReply }">回复</span>
										    	</div>
							    			</li>
						    			</c:forEach>
						    		</ul>
						    		<a class="secondCommentListMore" href="javascript:void(0);">更多 0 条回复</a>
						    	</div>
						    </c:if>
					    </li>
				    </c:forEach>
			  	</ul>
			</div>
		</c:if>
	</div>
	<script type="text/javascript">
		$(function(){
			var articleId = '${article.id }';
			$.ajax({
				type:'POST',
				data:{"articleId":articleId},
				url:'${contextPath}/security/addAol',
				dataType:'json',
				success:function(data){
					if(data.isDone){
						console.log("浏览记录+1")
					}else{
						console.log("浏览记录添加失败")
					}
				}
			});
		});
		$("#createComment").click(function(){
			var articleId = $("#articleId").val();
			var articleCreateId = $("#articleCreateId").val();
			var articleCreateUsername = $("#articleCreateUsername").val();
			var content = $("#toSaveCreateComment").val();
			if($.trim(content).length==0){
				alert("请填写评论内容!"); 
				return false;
			}
			$.ajax({
				type:'POST',
				data:{"articleId":articleId,"targetUserId":articleCreateId,"targetUsername":articleCreateUsername,"content":content},
				url:'${contextPath}/security/saveComment',
				dataType:'json',
				success:function(data){
					if(data.replay == 1){
						alert(data.message);
						window.location.reload();
					}else{
						alert(data.message);
					}
				}
			});
		});

		// 评论点击回复
		$(".commentReply").click(function(){
			if($(this).parent(".commentOperateDiv").children(".commentReplyDiv").length>=1){
				$(this).parent(".commentOperateDiv").children(".commentReplyDiv").remove();
				return false;
			}
			var commentReplyTargetId = this.id.split("_")[1];
			var isCommentReply = this.id.split("_")[2];
			var replyTargetUsername = $("#commentUsername_"+commentReplyTargetId).html();
			var replyDiv = ''+
				'<div class="commentReplyDiv" style="height:160px; margin-top: 15px; color:black;">'+
					'<textarea id="commentReplyContent_'+commentReplyTargetId+'" placeholder="回复 '+replyTargetUsername+'" style="width:100%; overflow-x: hidden; word-wrap: break-word; resize: none; height: 120px;"></textarea>'+
					'<button id="commentReply_'+commentReplyTargetId+'" onclick="saveCommentReply(this,'+isCommentReply+');" class="btn btn-success pull-right">回复</button>'+
				'</div>';
			$(this).parent(".commentOperateDiv").append(replyDiv);
		});
		
		function saveCommentReply(obj,isCommentReply){
			var replyTargetId = obj.id.split("commentReply_")[1];
			var articleId = $("#articleId").val();
			var content = $("#commentReplyContent_"+replyTargetId).val();
			if($.trim(content).length==0){
				alert("请填写评论内容!"); 
				return false;
			}
			$.ajax({
				type:'POST',
				data:{"articleId":articleId, "targetId":replyTargetId, "content":content, "isCommentReply":isCommentReply},
				url:'${contextPath}/security/saveCommentReply',
				dataType:'json',
				success:function(data){
					if(data.replay == 1){
						alert(data.message);
						window.location.reload();
					}else{
						alert(data.message);
					}
				}
			});
		}

	</script>
</body>
</html>
